<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/11 0011
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色权限</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>
    <style>
        .layui-table-cell {
            height:auto;
        }
    </style>

    <table class="layui-hide" id="rolepermtable" lay-filter="rolepermtable"></table>

    <script type="text/html" id="roleaddbtnscript">
        <button class="layui-btn" type="button" lay-event="add">添加/修改</button>
    </script>

    <script type="text/html" id="premtool">
        <button class="layui-btn layui-btn-xs" type="button" lay-event="permedit">修改</button>
    </script>

    <script type="text/html" id="premtabletemple">
        <table class="layui-hide" id="premtable" lay-filter="premtable" ></table>
        <input type="hidden" value="" id="roleId"/>
    </script>

    <script type="text/html" id="roleaddscript">
        <form class="layui-form" action="" lay-filter="roleaddform" style="padding-top: 20px">
            <input type="hidden" name="id" value="">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 60px">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </script>

    <script>

        layui.use(['table','laytpl','form'], function () {
            var table = layui.table;
            var laytpl = layui.laytpl;
            var form = layui.form;

            var tableins = table.render({
                elem: '#rolepermtable'
                , url: '/role/perm'
                , defaultToolbar: []
                ,toolbar: "#roleaddbtnscript"
                , cols: [[
                    {type:'checkbox'}
                    ,{field: 'id', width: 60, title: '标识'}
                    , {field: 'name', width: 95, title: '角色'}
                    , {field: 'utils', width: 95, toolbar: '#premtool', title: '修改权限'}
                    , {field: 'pname', width: 1200, title: '权限'}

                ]]
                , height: '750',
            });

            //监听头工具事件
            table.on('toolbar(rolepermtable)', function(obj){
                if(obj.event === 'add'){
                    laytpl(roleaddscript.innerHTML).render({}, function (html) {
                        var layerc = layer.open({
                            type: 1,
                            title: "操作", //不显示标题
                            skin: 'layui-layer-rim', //加上边框
                            area: ['350px', '190px'], //宽高
                            btn:['确定','取消'],
                            content: html,
                            yes(){
                                var data = form.val("roleaddform");
                                $.ajax({
                                    url:"/role/add",
                                    data:data,
                                    success:function(res){
                                        layer.msg(res.msg);
                                        tableins.reload();
                                        layer.close(layerc);
                                    }
                                })
                            },
                        });
                        form.render();
                        var checkStatus = table.checkStatus('rolepermtable')
                            ,checkStatusdata = checkStatus.data;
                        if (checkStatusdata[0]){

                            form.val("roleaddform",checkStatusdata[0]);
                        }
                    });
                }
            })

            //监听行工具事件
            table.on('tool(rolepermtable)', function(obj){
                let data = obj.data;
                if (obj.event === 'permedit'){
                    var pids = []
                    if (data.pid){
                        pids = data.pid.split(',')
                    }
                    laytpl(premtabletemple.innerHTML).render({}, function (html) {
                        var layerc = layer.open({
                            type: 1,
                            title: "操作", //不显示标题
                            skin: 'layui-layer-rim', //加上边框
                            area: ['420px', '700px'], //宽高
                            btn:['确定','取消'],
                            content: html,
                            yes(){
                                var checkStatus = table.checkStatus('premtable')
                                    ,data = checkStatus.data;
                                var roleId = $("#roleId").val()

                                var ids = [];
                                for (let x in data) {
                                    ids.push(data[x].id)
                                }

                                if (!roleId){
                                    layer.msg("未选中角色")
                                    return
                                }

                                layer.close(layerc);
                                $.ajax({
                                    url:"/role/upperm",
                                    traditional: true,
                                    data:{
                                        "roleId":roleId,
                                        "permIds":ids
                                    },
                                    success:function(res){
                                        layer.msg(res.msg);
                                        tableins.reload();
                                        layer.close(layerc);
                                    }
                                })
                            },
                        });
                    });
                    $("#roleId").val(data.id)
                    var premtable = table.render({
                        elem: '#premtable'
                        ,url:'/perm/all'
                        , cols: [[
                            {type:'checkbox'}
                            ,{field: 'id', width: 60, title: '标识'}
                            , {field: 'menuName', width: 100,title: '上级权限'}
                            , {field: 'name', width: 200, title: '权限'}
                        ]]
                        ,height: 'full'
                        ,done: function(res, curr, count){
                            if (pids.length>0){
                                for (let x in res.data) {
                                    if (pids.indexOf(res.data[x].id.toString())>-1){
                                        $("div[lay-id='premtable']").find("tr[data-index='"+x+"']").find(".layui-form-checkbox").click()
                                    }
                                }
                            }
                        }
                    });


                }
            });

        });
    </script>

</body>
</html>
